<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="../../include/head.jsp"%>
    <title>数据表格的重载 - 数据表格</title>
</head>
<body layadmin-themealias="default">
<div class="layui-card">
    <%--<div class="layui-card-header">数据列表</div>--%>
    <div class="layui-card-body">
        <!-- start 搜索框 -->
        <div class="layui-collapse" style="margin-bottom: 10px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">搜索操作</h2>
                <div class="layui-colla-content layui-show">
                    <!-- 搜索相关表单及控件 参照`表单`样式 -->
                    <form class="layui-form layui-form-pane" id="search-form">
                        <!-- start 行信息 -->
                        <div class="layui-form-item" style="margin-bottom: 0;">

                            <!-- start 单个元素项 -->
                            <div class="layui-inline">
                                <%--<label class="layui-form-label">关键字</label>--%>
                                <div class="layui-input-inline">
                                    <input type="text" name="keyword" lay-verify="title" autocomplete="off" placeholder="请输入关键字" class="layui-input">
                                </div>
                            </div>
                            <!-- end 单个元素项 -->

                            <!-- start 单个元素项 -->
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline" style="width: 120px;">
                                    <select name="state">
                                        <option value=""></option>
                                        <option value="0">禁用</option>
                                        <option value="1">启用</option>
                                        <option value="2" selected="selected">全部</option>
                                    </select>
                                </div>
                            </div>
                            <!-- end 单个元素项 -->

                            <!-- start 单个元素项 -->
                            <div class="layui-inline">
                                <button type="button" class="layui-btn" id="search-btn">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                            </div>
                            <!-- end 单个元素项 -->
                        </div>
                        <!-- end 行信息 -->
                    </form>
                </div>
            </div>
        </div>
        <!-- end 搜索框 -->

        <!-- start 表格内容 -->
        <div>
            <div class="layui-btn-group btn-group-bottom">
                <button class="layui-btn layui-btn-orange layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>添加
                </button>
                <button class="layui-btn layui-btn-blue layui-btn-sm">
                    <i class="layui-icon">&#xe642;</i>修改
                </button>
                <button class="layui-btn layui-btn-red layui-btn-sm" id="del-batch-btn">
                    <i class="layui-icon">&#xe640;</i>删除
                </button>
                <button class="layui-btn layui-btn-green layui-btn-sm">
                    <i class="layui-icon">&#xe621;</i>导出
                </button>
            </div>
            <!-- start 顶部按钮 -->
            <div class="table-header-btn-group">
                <a><i class="layui-icon"><span>&#xe652;</span>开启</i></a>
                <a><i class="layui-icon"><span>&#xe651;</span>停用</i></a>
                <a><i class="layui-icon"><span>&#xe64c;</span>链接</i></a>
                <a><i class="layui-icon"><span>&#xe628;</span>重启</i></a>
            </div>
            <!-- end 顶部按钮 -->
            <table class="layui-hide" id="data-table" lay-filter="data-table"></table>
        </div>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

            <!-- 这里同样支持 laytpl 语法，如： -->
            <%--{{#  if(d.id > 2){ }}--%>
            <%--<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>--%>
            <%--{{#  } }}--%>
        </script>
        <!-- end 表格内容 -->
    </div>
</div>

<script type="text/javascript">
    layui.use(['index', 'element', 'layer', 'table'], function(){
        // 表格实例化
        var table = layui.table;
        table.render({
            elem: '#data-table',
            url: '${ctx}/demo/table/users', //数据接口
            page: true, //开启分页
            cols: [
                [ //表头
                    {checkbox: true, fixed: true},
                    {field: 'id', title: 'ID', width:80},
                    {field: 'username', title: '用户名', event: 'view'},
                    {field: 'sex', title: '性别', width:80},
                    {field: 'city', title: '城市', width:80},
                    {field: 'sign', title: '签名'},
                    {field: 'experience', title: '积分', width: 80},
                    {field: 'score', title: '评分', width: 80},
                    {field: 'classify', title: '职业', width: 80},
                    {field: 'wealth', title: '财富'},
                    {title: '操作', align:'left', width: 150, toolbar: '#barDemo'}
                ]
            ]
        });

        // 搜索按钮点事件
        $('#search-btn').on('click', function(){
            table.reload('data-table', {
                where: getParamJson('#search-form'),
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //表格事件统一处理
        table.on('tool(data-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){ //删除
                parent.layer.confirm('真的删除行么', function(index){
                    //向服务端发送删除指令
                    $.post('${ctx}/demo/table/del', {
                        id: data.id
                    }, function(result){
                        if(result.code == 0){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }else{
                            layer.msg('删除失败！');
                        }
                    }, 'json');
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                });
            } else if(layEvent === 'view'){ //查看
                //do something
                parent.layer.msg('查看：' + data.username);
            }
        });

        $('#del-batch-btn').on('click', function(){
            var checkStatus = table.checkStatus('data-table');
            if(checkStatus.data.length == 0){
                parent.layer.msg('请选择操作的记录');
                return;
            }
            var params = {
                id: $.map(checkStatus.data, function(item){
                    return item.id;
                })
            };
            parent.layer.confirm('真的删除所选的行么', function(index){
                //向服务端发送删除指令
                $.post('${ctx}/demo/table/del', $.param(params, true), function(result){
                    if(result.code == 0){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                    }else{
                        layer.msg('删除失败！');
                    }
                }, 'json');
            });
        });
    });
</script>
</body>
</html>
